<script setup>
	import {
		ref
	} from 'vue';

	const emit = defineEmits({
		// 没有校验
		click: null,

		// 校验 submit 事件
		submit: ({
			email,
			password
		}) => {
			if (email && password) {
				alert(email + password)
				return true
			} else {
				console.warn('Invalid submit event payload!')
				return false
			}
		}
	})

	function submitForm(email, password) {
		emit('submit', {
			email,
			password
		})
	}


	const name = ref('Vue.js')

	function greet(event) {
		alert(`Hello ${name.value}!`)
		// `event` 是 DOM 原生事件
		if (event) {
			alert(event.target.tagName)
		}
	}

	function say(message) {
		alert(message)
	}

	function warn(message, event) {
		// 这里可以访问原生事件
		if (event) {
			event.preventDefault()
		}
		alert(message)
	}

	var submitMsg = ref('提交事件')

	function submit() {
		alert(submitMsg.value)
	}

	function clear() {
		submitMsg.value = ''
	}
</script>

<template>
	<button @click="greet">alert弹窗</button>
	<button @click="say('hello')">Say hello</button>
	<button @click="say('bye')">Say bye</button>
	<button @click="submitForm('zy@136.com','123456')">提交</button>
	<!-- 使用特殊的 $event 变量 -->
	<button @click="warn('Form cannot be submitted yet.', $event)">
		Submit
	</button>

	<!-- 使用内联箭头函数 -->
	<button @click="(event) => warn('Form cannot be submitted yet.', event)">
		Submit
	</button>
	<br />
	<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
	<input v-model="submitMsg" @keyup.enter="submit" />

	<!-- Alt + Enter -->
	<input @keyup.alt.enter="clear" />

	<!-- Ctrl + 点击 -->
	<div @click.ctrl="doSomething">Do something</div>

	<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
	<button @click.ctrl="onClick">A</button>

	<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
	<button @click.ctrl.exact="onCtrlClick">A</button>

	<!-- 仅当没有按下任何系统按键时触发 -->
	<button @click.exact="onClick">A</button>

</template>

<style></style>